<template>
  <span>
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="iconTag"></use>
    </svg>
    <slot></slot>
  </span>
</template>

<script>
import './iconfont.js'
export default {
  name: 'aIcon',
  props: {
    type: {
      type: String,
      required: true,
    },
  },
  computed: {
    iconTag() {
      return `#${this.type}`
    },
  },
}
</script>

<style scoped>
.icon {
  overflow: hidden;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.17em;
  fill: currentcolor;
}
</style>
